import React, { useState } from 'react';
import '../scss/fp/login.css'
import { message } from 'antd';
import { useNavigate } from 'react-router-dom';

import { user_login } from "../tools/api";

function Login(props) {

    var [username, setUsername] = useState();

    var [password, setPassword] = useState();

    const usernameValue = (e) => {
        //-----🍌---🍌---🍌-----
        //  console.log(e.target.value);
        setUsername(e.target.value)
    }

    const passwordValue = (e) => {
        //-----🍌---🍌---🍌-----
        // console.log(e.target.value);
        setPassword(e.target.value)
    }

    var push = useNavigate();
    
    // 登录，并且给一个 token , 存储 用户的信息
    const goLogin = () => {
       //-----🍌---🍌---🍌-----
       user_login().then(
           response => {
               var data = response.data.findIndex((item)=>{
                   return item.username == username && item.password == password;
                })

                if (data != -1) {
                    message.open({ type: 'success', content: '登陆成功!' });
                    localStorage.setItem('token', '这是一个token')
                    // console.log(response.data[data]);
                    localStorage.setItem('userinfo', JSON.stringify(response.data[data]))
                    push('/index')

                } else {
                    message.open({ type: 'error', content: '账号未注册，请先进行注册!' });
                    push('/register')
                }
            }
        )
    }


    return (
        <>
            <div className="body">
                <div className="login-box">
                    <div className="owl" id="owl">
                        <div className="hand"></div>
                        <div className="hand hand-r"></div>
                        <div className="arms">
                            <div className="arm"></div>
                            <div className="arm arm-r"></div>
                        </div>
                    </div>
                    <div className="input-box">
                        <input type="text" placeholder="账号" onChange={usernameValue} value={username} />
                        <input type="password" placeholder="密码" onChange={passwordValue} value={password} />
                        <button onClick={goLogin}>登录</button>
                    </div>
                </div>
            </div>
        </>
    );
}

export default Login;